---
import Breadcrumbs from '../components/Breadcrumbs.astro';
import RoadmapBanner from '../components/RoadmapBanner.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getTopicFiles, TopicFileType } from '../lib/topic';
import '../styles/prism.css';

export async function getStaticPaths() {
  const topicPathMapping = await getTopicFiles();

  return Object.keys(topicPathMapping).map((topicSlug) => ({
    params: { topicId: topicSlug.replace(/^\//, '') },
    props: topicPathMapping[topicSlug],
  }));
}

const { topicId } = Astro.params;
const { file, breadcrumbs, roadmapId, roadmap, heading } =
  Astro.props as TopicFileType;
---

<BaseLayout
  title={`${heading} - roadmap.sh`}
  description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`}
  noIndex={true}
  permalink={`/${topicId}/`}
>
  <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
  <div class='bg-gray-50'>
    <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />

    <div
      class='container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'
    >
      <main id='main-content'>
        <file.Content />
      </main>
    </div>
  </div>
</BaseLayout>
